<template>
  <!-- 竞拍市场  我的发布 -->
  <div class="app-container">
    <div class=" customTab">
      <el-tabs type="border-card" v-model="actived" @tab-click="tabChange" v-loading="loading">
        <template >
          <el-tab-pane v-if="checkPermi(['jingpai:list'])" label="竞拍列表" name="list"  >
            <div class="tongji-box flex" v-if="actived=='list'">
              <!-- 统计 -->
              <div class="card">
                <subtit title="数量统计">
                  <div class="select flex">
                    <div class="day1" @click="tongjiData.days=0;getbackCluebiddingTongji()" :class="{active:tongjiData.days===0}">当日</div>
                    <div class="day2" @click="tongjiData.days=7;getbackCluebiddingTongji()" :class="{active:tongjiData.days===7}">近7日</div>
                    <div class="day3" @click="tongjiData.days=15;getbackCluebiddingTongji()" :class="{active:tongjiData.days===15}">近15日</div>
                    <div class="day4" @click="tongjiData.days=30;getbackCluebiddingTongji()" :class="{active:tongjiData.days===30}">近30日</div>
                  </div>
                </subtit>
                <div class="cont_box flex">
                  <div class="tongji-item flex">
                    <img src="../../assets/images/fabu.png" alt="">
                    <div class="rg">
                      <div class="tit">最新发布</div>
                      <div class="num">
                        <count-to :start-val="0" :end-val="tongjiData.zuixinfabu" :duration="1000" class="card-panel-num" />
                      </div>
                    </div>
                  </div>
                  <div class="tongji-item bjsl flex">
                    <img src="../../assets/images/yibaojia.png" alt="">
                    <div class="rg">
                      <div class="tit">报价数量</div>
                      <div class="num">
                        <count-to :start-val="0" :end-val="tongjiData.yibaojia" :duration="1000" class="card-panel-num" />
                      </div>
                    </div>
                  </div>
                  <div class="tongji-item wbjsl flex">
                    <img src="../../assets/images/weibaojia.png" alt="">
                    <div class="rg">
                      <div class="tit">未报价数量</div>
                      <div class="num">
                        <count-to :start-val="0" :end-val="tongjiData.weibaojia" :duration="1000" class="card-panel-num" />
                      </div>
                    </div>
                  </div>
                  <div class="tongji-item zbsl flex">
                    <img src="../../assets/images/zhongbiao.png" alt="">
                    <div class="rg">
                      <div class="tit">中标数量</div>
                      <div class="num">
                        <count-to :start-val="0" :end-val="tongjiData.zhongbiao" :duration="1000" class="card-panel-num" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 倒计时 -->
              <div class="daojishi flex" style="line-height: 30px;margin-bottom: 10px;">
                <div class="daojishi-lf">
                  <div>
                    <el-statistic v-if="baoDaojishi" @finish="hilarity" :value="baoDaojishi" format="HH:mm:ss" time-indices :title="`距离竞拍${baojiaState==1?'开始':'结束'}还有`">
                    </el-statistic>
                  </div>
                  <div style="font-size: 14px;color: #808191;line-height: 22px;margin-top: 3px;">
                    {{ `竞拍时间:${timeArr[0]}-${timeArr[1]}` }}
                  </div>
                  <div style="line-height: 23px;">
                    <span class="jiaocheng" @click="openJingjiaGuize">
                      查看竞拍规则
                    </span><br/>

                    <span class="jiaocheng" @click="openUrl('https://imgage.maimaihao.com/11%E6%9C%8821%E6%97%A5.mp4')">
                      查看视频教程
                    </span>
                  </div>
                </div>
                <div class="daojishi-rg">

                </div>
                <!-- <el-statistic v-if="baoDaojishi" @finish="hilarity" :value="baoDaojishi" format="HH小时mm分钟ss秒" time-indices :title="`距离竞拍${baojiaState==1?'开始':'结束'}还有`">
                  <template slot="prefix">
                    <span style="font-size: 16px;"></span>
                  </template>
                </el-statistic> -->
              </div>
            </div>
            <div v-if="actived=='list'">
              <div class=" search-box">
                <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px">
                  <el-form-item label="游戏类型" prop="gameId">
                    <el-select v-model="queryParams.gameId" placeholder="请选择游戏" size="small" clearable>
                      <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="状态" prop="bstate">
                    <el-select v-model="queryParams.bstate" placeholder="请选择状态" size="small" clearable>
                      <el-option v-for="(dict,key) in bstateMap" :key="key" :label="dict.label" :value="key" />
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="账号" prop="account">
                  <el-input v-model="queryParams.account" placeholder="请输入账号" clearable size="small" />
                </el-form-item> -->
                  <!-- <el-form-item label="简介" prop="des">
                  <el-input v-model="queryParams.des" placeholder="请输入关键字" clearable size="small" />
                </el-form-item> -->
                  <el-form-item class="btns">
                    <el-button type="primary" icon="el-icon-search" size="small" @click="search" class="zdy-btn">搜索</el-button>
                    <el-button icon="el-icon-refresh" type="primary" size="small" plain @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>

                  </el-form-item>

                </el-form>
              </div>
              <div class=" table_box" >

                <el-table v-loading="loading" :data="tableData.records" style="width: 100%">
                  <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
                  <!-- <el-table-column v-if="actived == '已拒收'" prop="rmsg" label="拒收原因" width="120"></el-table-column>
                <el-table-column prop="partition" label="来源" width="80" v-if="pageType == 'lianmeng'">
                  <template slot-scope="scope">
                    <span v-if="scope.row.partition == 1" style="color: #947f08;">回收链接</span>
                    <span v-if="scope.row.partition == 2" style="color: #6f920f;">官网</span>
                    <span v-if="scope.row.partition == 3" style="color: #af74ef;">
                      三方
                    </span>
                  </template>
                </el-table-column> -->
                  <el-table-column prop="gameName" label="游戏名称" width="150"></el-table-column>
                  <el-table-column prop="region" label="区服" width="150"></el-table-column>

                  <!-- <el-table-column prop="account" label="游戏账号" width="100" ></el-table-column> -->
                  <el-table-column prop="relname" label="实名" width="100"></el-table-column>

                  <!-- isAgreeBp -->
                  <el-table-column prop="des" label="商品详情" min-width="260">
                    <template slot-scope="scope">
                     
                        <div @click="openDetail(scope.row.id,'view')" class="zdy-des">{{ scope.row.des }}</div>
                    
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
                  <el-table-column prop="bstate" label="状态" width="100">
                    <template slot-scope="scope">
                      <el-tag type="success" v-if="scope.row.bstate == 1">已报价</el-tag>
                      <el-tag type="warning" v-else>未报价</el-tag>

                    </template>
                  </el-table-column>

                  <!-- <el-table-column prop="" label="黑号提示" width="100">
                  <template slot-scope="scope">
                    <el-tag type="danger" v-show="scope.row.isBlack==1">{{ scope.row.isBlack==1?'黑号':'' }}</el-tag>
                  </template>
                </el-table-column> -->
                  <!-- <el-table-column prop="bprice" label="报价金额" width="100" v-if="actived == '已报价'"></el-table-column>
                <el-table-column prop="btime" label="报价时间" width="160" v-if="actived == '已报价'"></el-table-column> -->
                  <!-- <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <span v-if="userInfo&&userInfo.userId==scope.row.supplyUserId">{{commonMaps.bstatusMap[scope.row.status||0].label}}</span>
                    <span v-else>{{scope.row.status!=0?'已拒绝':commonMaps.bstatusMap[0].label}}</span>

                  </template>
                </el-table-column> -->
                  <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                      <!-- goIM -->
                      <!-- <el-button type="text" v-if="actived != '待报价'"  @click="goIM(scope.row)">联系</el-button> -->
                      <!-- <el-button type="text" style="color:#af0c0c"  @click="refuseLianmeng(scope.row)">拒收</el-button> -->
                      <!-- <el-button type="text" v-if="checkPermi(['jingpai:chujia'])&&scope.row.bstate!=1&&baojiaState==2" @click="openDetail(scope.row.id,'edit')">报价</el-button> -->
                       <el-button type="text" v-if="checkPermi(['jingpai:chujia'])&&scope.row.myMaxCount<5&&baojiaState==2" @click="openDetail(scope.row.id,'edit')">报价</el-button>
                      <el-button type="text" @click="openDetail(scope.row.id,'view')">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>

              </div>
              <div class="pages-box">
                <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="checkPermi(['jingpai:myFabu'])" label="我的发布" name="fabu"  >
            <myFabu :openId="openId"></myFabu>
          </el-tab-pane>
          <el-tab-pane v-if="checkPermi(['jingpai:myChujia'])" label="我的出价" name="chujia"  >
            <myChujia></myChujia>
          </el-tab-pane>
        </template>
        
      </el-tabs>
    </div>
    
    <jingjiaGoodsDetail ref="jingjiaGoodsDetail"></jingjiaGoodsDetail>
    <jingjiaguizeDialog ref="jingjiaguizeDialog"></jingjiaguizeDialog>
  </div>
</template>
  
  <script>
import jingpaiApi from "@/api/jingpaishichang/index.js";
import jingjiaGoodsDetail from "./components/jingjiaGoodsDetail.vue";
import jingjiaguizeDialog from "./components/jingjiaguizeDialog.vue";
import CountTo from "vue-count-to";
import subtit from "@/components/indexComponents/subtit.vue";
import myFabu from "./myFabu.vue";
import myChujia from "./myChujia.vue"
export default {
  name: "Jingpailiebiao",
  components: { jingjiaGoodsDetail, jingjiaguizeDialog, CountTo, subtit,myFabu,myChujia },
  data() {
    return {
      actived:'list',
      // 'list','fabu','chujia'
      tabList:[
        {
          name:'竞拍列表',
          value:'list'
        },
        {
          name:'我的发布',
          value:'fabu'
        },
        {
          name:'我的出价',
          value:'chujia'
        },
      ],

      tongjiData: {
        days: 0,
        yibaojia: 0,
        zhongbiao: 0,
        zuixinfabu: 0,
        weibaojia: 0,
      },
      baoDaojishi: "",
      startTime: "",
      endTime: "",
      timeArr: [],
      baojiaState: 1,
      tableData: {
        records: [],
        total: 0,
      },
      bstateMap: {
        1: {
          type: "success",
          label: "已报价",
        },
        2: {
          type: "warning",
          label: "未报价",
        },
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gameId: "",
        bstate: "",
      },
      openId:''
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  created() {
    // if (this.$route.query && this.$route.query.openId) {
    //   if(this.$route.query.tab&&this.$route.query.tab=='fabu'){
    //     this.openId = this.$route.query.openId;
    //     this.actived = this.$route.query.tab
    //   }
    // }
    this.getList();
    this.getJJSCguize();
  },
  watch: {
    $route: {
      handler(newVal,oldVal) {
        if (
          newVal.path=='/huoyuan/jingpailiebiao'&&newVal.query.tab&&newVal.query.tab=='fabu'&&newVal.query.openId
        ) {
          this.openId = this.$route.query.openId;
          this.actived = this.$route.query.tab
        } else {
        }
      },
      immediate: true,
      deep: true,
    },
  },
  activated() {
    // this.getList();
  },
  methods: {
    tabChange(val){
      console.log("%c Line:278 🍷 val", "color:#fca650", val);
      this.actived = val.name
    },
    // 获取竞拍统计
    getbackCluebiddingTongji() {
      this.tongjiData.yibaojia = 0;
      this.tongjiData.zhongbiao = 0;
      this.tongjiData.zuixinfabu = 0;
      this.tongjiData.weibaojia = 0;
      jingpaiApi
        .backCluebiddingTongji({
          days: this.tongjiData.days,
        })
        .then((res) => {
          this.tongjiData.yibaojia = res.data.yibaojia;
          this.tongjiData.zhongbiao = res.data.zhongbiao;
          this.tongjiData.zuixinfabu = res.data.zuixinfabu;
          this.tongjiData.weibaojia = res.data.zuixinfabu - res.data.yibaojia;
        });
    },
    //获取竞价回收规则字典
    async getJJSCguize() {
      const res = await this.getDicts("biddingRule");
      if (res.data && res.data.length) {
        this.jjscguize = this.arrayToObject(res.data, "dictLabel");
        if (this.jjscguize.baojiaTime) {
          const arr = this.jjscguize.baojiaTime.dictValue.split(",");
          this.timeArr = arr;
          // 计算到计时时间
          const todayDate = this.parseTime(new Date(), "{y}-{m}-{d}");
          const nowtime = new Date().getTime();

          this.startTime = todayDate + " " + arr[0] + ":00";
          this.endTime = todayDate + " " + arr[1] + ":00";

          if (nowtime < new Date(this.startTime).getTime()) {
            // 当天还未开始
            this.baoDaojishi = new Date(this.startTime);
            this.baojiaState = 1;
          } else if (
            nowtime >= new Date(this.startTime).getTime() &&
            nowtime <= new Date(this.endTime).getTime()
          ) {
            // 报价时间段内
            this.baoDaojishi = new Date(this.endTime);
            this.baojiaState = 2;
          } else if (nowtime >= new Date(this.endTime).getTime()) {
            // 报价时间已过  计时明天的报价开始时间
            this.baoDaojishi =
              new Date(this.startTime).getTime() + 1000 * 60 * 60 * 24;
            this.baojiaState = 1;
          }
        }
      }
    },
    // 打开竞价规则
    openJingjiaGuize() {
      this.$refs.jingjiaguizeDialog.open();
    },
    openUrl(url) {
      window.open(url);
    },
    // 获取列表
    getList() {
      this.loading = true;
      this.queryParams.status = "";
      this.getbackCluebiddingTongji();
      jingpaiApi
        .getList({
          ...this.queryParams,
        })
        .then((response) => {
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
          this.loading = false;
        });
    },
    //倒计时结束
    hilarity() {
      const nowtime = new Date().getTime();
      if (nowtime < new Date(this.startTime).getTime()) {
        // 当天还未开始
        this.baojiaState = 1;
        this.baoDaojishi = new Date(this.startTime);
      } else if (
        nowtime >= new Date(this.startTime).getTime() &&
        nowtime <= new Date(this.endTime).getTime()
      ) {
        // 报价时间段内
        this.baoDaojishi = new Date(this.endTime);
        this.baojiaState = 2;
      } else if (nowtime >= new Date(this.endTime).getTime()) {
        // 报价时间已过  计时明天的报价开始时间
        this.baoDaojishi =
          new Date(this.startTime).getTime() + 1000 * 60 * 60 * 24;
        this.baojiaState = 1;
      }
    },

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 打开详情
    openDetail(id, flag) {
      //报价前查询一下竞拍客服
      if(flag=='edit') {
        jingpaiApi.backClueCustomer().then((res) => { 
          if(!res.data) {
            this.$confirm("报价前,请先设置竞拍客服！", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.$router.push({
                path: "/system/juese2",
              });
            });
          }else {
            this.$refs.jingjiaGoodsDetail.open(id, flag);
          }
        });
      }else {
         this.$refs.jingjiaGoodsDetail.open(id, flag);
      }
     
    },

    // 打开报价弹窗-回收联盟
    editOrder(row, flag) {
      this.$refs.addDialog.open(flag, row);
    },

    // 回收联盟-拒收
    refuseLianmeng(row) {
      this.$prompt("请输入拒收原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /\S/,
        // inputErrorMessage: '请输入卖家ID',
        type: "warning",
      })
        .then(({ value }) => {
          let obj = {
            backId: row.id,
            rmsg: value,
            status: 5,
          };
          jingpaiApi.refauseLianmengOrder(obj).then((res) => {
            //console.log("%c Line:518 🍎拒收-回收联盟 res", "color:#ea7e5c", res);
            if (res.code == 200) {
              this.getList();
              this.$message({
                type: "success",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {});
    },
    // 打开报价弹窗-我的回收
    editOrderMy(row) {
      //console.log("%c Line:297 🍺 row", "color:#fca650", row);
      this.$refs.merchantRetrievePrice.open("edit", row);
    },
    // 打开查看弹窗
    viewPhone(row) {
      this.$refs.viewPhone.open(row);
    },
    // 打开查看图片弹窗
    viewImgs(row) {
      let arr = [];
      if (row.img) {
        let list = JSON.parse(row.img);
        if (list.length) {
          list.forEach((element) => {
            arr.push(element.url);
          });
        } else {
          this.$alert("暂无图片");
        }
      } else {
        this.$alert("暂无图片");
      }
      this.$refs.imageDialog.open(arr);
    },
    // 打开查看报价列表弹窗
    viewPriceList(row) {
      this.$refs.bpriceList.open(row);
    },
    //

    docopy(val) {
      // //console.log('%c 🍦 val: ', 'font-size:20px;background-color: #93C0A4;color:#fff;', val);
      let str = val;
      //console.log('%c 🥖 str: ', 'font-size:20px;background-color: #FCA650;color:#fff;', str);
      this.$copytext(str).then((e) => {
        alert("复制成功");
        //console.log(e)
      });
    },

    // 取消回收
    cancelOrder() {
      this.$prompt("请输入取消原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入原因",
        type: "warning",
      })
        .then(({ value }) => {
          //console.log('%c 🥜 value: ', 'font-size:20px;background-color: #465975;color:#fff;', value);
        })
        .catch(() => {});
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        gameId: "",
        bstate: "",
      };
      this.getList();
    },
  },
};
</script>
  <style lang="scss" scoped>
.jiaocheng {
  color: #5f75ee;
  margin-bottom: 5px;
  cursor: pointer;
  margin-left: 10px;
}
.app-container {
  padding: 0;
}
.tongji-box {
  // height: 80px;
  flex-wrap: nowrap;
  align-items: center;
  // margin-bottom: 10px;
  // padding: 10px;
  .select {
    margin-left: 15px;
    > div {
      border: 1px solid #ccc;
      border-right: none;
      padding: 3px 10px;
      cursor: pointer;
      color: #4E5969;
      font-size: 14px;
      &:last-child {
        border-right: 1px solid #D8DCE6;
        border-radius: 0 3px 3px 0;
      }
      &:first-child {
        border-radius: 3px 0 0 3px;
      }
      &.active {
        border-color: #6C5DD3;
        background: #6C5DD3;
        color: #fff;
      }
    }
  }
  .card {
    background-color: #fff;
    padding: 16px;
    border-radius: 10px;
    margin-right: 15px;
    width: 100%;
  }
  .cont_box {
    flex-wrap: nowrap;
    align-items: center;
    padding-top: 15px;
    
    .tongji-item {
      min-width: 200px;
      background: #ffa2c0;
      border-radius: 8px;
      // justify-content: center;
      padding-left: 20px;
      align-items: center;
      margin-right: 20px;
      height: 120px;
      width: 25%;
      color: #ffffff;
      &.bjsl {
        background: #ffce73;
      }
      &.wbjsl {
        background: #a0d7e7;
      }
      &.zbsl {
        background: #7fba7a;
      }
      img {
        width: 70px;
        height: 70px;
        margin-right: 15px;
      }
      .tit {
        font-weight: bold;
        font-size: 16px;

        height: 30px;
        line-height: 40px;
      }
      .num {
        font-weight: 500;
        font-size: 24px;
        line-height: 40px;
      }
    }
  }
  .daojishi {
    width: 476px;
    height: 192px;
    padding: 15px 10px;
    padding-top: 20px;
    background-image: url("../../assets//images/clockbigbg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-y: 5px;
    // position: relative;
    .daojishi-lf {
      width: 245px;
      height: 179px;
      // position: absolute;
      background-image: url("../../assets//images/clockbg.png");
      background-size: 100% 100%;
      // left: -20px;
      text-align: center;
      padding-top: 15px;
    }
    .daojishi-rg{
      width: 170px;
      height: 170px;
      background-image: url("../../assets//images/clock.gif");
      background-size: 100% 100%;
      background-position-y: -10px;
      background-position-x: -5px;
    }
  }
}

::v-deep .el-statistic .head {
  color: #11142d;
  line-height: 16px;
  font-size: 16px;
}
::v-deep .el-statistic .number,::v-deep .el-statistic .con .number {
  color: #6c5dd3;
  font-size: 32px;
  font-weight: bold;
  // margin-top: 2px;
}
.zdy-des {
  cursor: pointer;
}
</style>
  